<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/royal') // echarts theme
import { debounce } from '@/utils'

const animationDuration = 6000

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },

  },
  data() {
    return {
      chart: null,
      opinion:{
        "backgroundColor": "#fff",
        "tooltip": {
          "trigger": "axis",
          "axisPointer": {
            "type": "shadow"
          }
        },
        "dataZoom": [{
          "type": "slider",
          "show": true
        }],
        "legend": {
          "data": []
        },
        "grid": {
          "top": 10,
          "left": "2%",
          "right": "2%",
          "bottom": "3%",
          "containLabel": true
        },
        "toolbox": {
          "feature": {
            "saveAsImage": {}
          }
        },
        "xAxis": [{
          "type": "category",
          "boundaryGap": false,
          "data": ["2021-07-01", "2021-07-02", "2021-07-03", "2021-07-04", "2021-07-05", "2021-07-06", "2021-07-07", "2021-07-08", "2021-07-09", "2021-07-10", "2021-07-11", "2021-07-12", "2021-07-13", "2021-07-14", "2021-07-15", "2021-07-16", "2021-07-17", "2021-07-18", "2021-07-19", "2021-07-20", "2021-07-21", "2021-07-22", "2021-07-23", "2021-07-24", "2021-07-25", "2021-07-26", "2021-07-27", "2021-07-28", "2021-07-29", "2021-07-30", "2021-07-31", "2021-08-01", "2021-08-02", "2021-08-03", "2021-08-04", "2021-08-05", "2021-08-06", "2021-08-07", "2021-08-08", "2021-08-09", "2021-08-10", "2021-08-11", "2021-08-12", "2021-08-13", "2021-08-14", "2021-08-15", "2021-08-16", "2021-08-17", "2021-08-18"],
          "axisTick": {
            "alignWithLabel": true
          }
        }],
        "yAxis": [{
          "type": "value",
          "axisTick": {
            "show": false
          }
        }],
        "series": [{
          "data": [null, null, null, null, 23, null, null, null, null, null, null, 44, null, null, null, null, null, null, null, null, 77, null, null, null, null, null, null, null, null, null, null, null, 34, null, null, null, null, null, null, null, null, 76, null, null, null, null, null, null, null],
          "type": "line",
          "symbol": "diamond",
          "symbolSize": 20,
          "lineStyle": {
            "color": "#ffffff",
            "width": 4,
            "type": "dashed"
          },
          "label": {
            "normal": {
              "formatter": "报刊",
              "show": true
            }
          },
          "name": "报刊"
        }, {
          "data": [null, null, null, null, null, null, null, null, null, null, 23, null, null, null, null, null, null, null, null, null, null, null, null, 87, null, null, null, null, null, null, null, 5, null, null, null, null, null, null, 7, null, null, null, null, null, null, null, 65, null, null],
          "type": "line",
          "symbol": "diamond",
          "symbolSize": 20,
          "lineStyle": {
            "color": "#ffffff",
            "width": 4,
            "type": "dashed"
          },
          "label": {
            "normal": {
              "formatter": "论坛",
              "show": true
            }
          },
          "name": "论坛"
        }, {
          "data": [null, null, null, null, null, null, 34, null, null, null, null, null, null, null, null, null, null, null, null, null, 65, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 54, null, null, null, null, null, null, null, null, null, null],
          "type": "line",
          "symbol": "diamond",
          "symbolSize": 20,
          "lineStyle": {
            "color": "#ffffff",
            "width": 4,
            "type": "dashed"
          },
          "label": {
            "normal": {
              "formatter": "微博",
              "show": true
            }
          },
          "name": "微博"
        }, {
          "data": [null, null, null, null, null, null, null, null, null, 23, null, 34, null, null, null, null, null, null, null, null, null, null, 76, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 54, null, null, null, null, null, null, null, null, null, null, null],
          "type": "line",
          "symbol": "diamond",
          "symbolSize": 20,
          "lineStyle": {
            "color": "#ffffff",
            "width": 4,
            "type": "dashed"
          },
          "label": {
            "normal": {
              "formatter": "网站",
              "show": true
            }
          },
          "name": "网站"
        }, {
          "data": [null, 32, null, 3, null, 34, null, null, null, 45, null, 7, null, null, null, 5, null, null, null, 43, null, null, 65, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 52, null, null, null, null, null, null, null, null],
          "type": "line",
          "symbol": "diamond",
          "symbolSize": 20,
          "lineStyle": {
            "color": "#ffffff",
            "width": 4,
            "type": "dashed"
          },
          "label": {
            "normal": {
              "formatter": "微信",
              "show": true
            }
          },
          "name": "微信"
        }, {
          "data": [null, null, null, null, null, null, null, null, null, 45, null, null, null, null, null, null, null, null, 25, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 54, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
          "type": "line",
          "symbol": "diamond",
          "symbolSize": 20,
          "lineStyle": {
            "color": "#ffffff",
            "width": 4,
            "type": "dashed"
          },
          "label": {
            "normal": {
              "formatter": "政务",
              "show": true
            }
          },
          "name": "政务"
        }, {
          "data": [null, null, null, null, 34, null, null, null, null, null, null, null, 4, null, null, null, null, null, null, null, 54, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 87, null, null, null, null, null, null, null, null, null, null, null, null, null],
          "type": "line",
          "symbol": "diamond",
          "symbolSize": 20,
          "lineStyle": {
            "color": "#ffffff",
            "width": 4,
            "type": "dashed"
          },
          "label": {
            "normal": {
              "formatter": "客户端",
              "show": true
            }
          },
          "name": "客户端"
        }, {
          "data": [null, null, null, null, null, null, null, null, null, null, null, 45, null, null, 32, null, null, 67, null, null, null, null, 43, null, null, null, null, null, null, null, null, null, null, null, null, null, 45, null, null, null, null, null, null, null, null, null, null, null, null],
          "type": "line",
          "symbol": "diamond",
          "symbolSize": 20,
          "lineStyle": {
            "color": "#ffffff",
            "width": 4,
            "type": "dashed"
          },
          "label": {
            "normal": {
              "formatter": "新闻",
              "show": true
            }
          },
          "name": "新闻"
        }, {
          "data": [3, 6, 9, 23, 54, 23, 65, null, null, null, null, null, 86, null, null, null, null, null, null, null, null, null, 14, 3, 36, null, null, 3, null, null, null, null, null, null, null, null, null, null, null, null, 9, null, null, null, null, null, null, null, null],
          "type": "line",
          "symbol": "diamond",
          "symbolSize": 20,
          "lineStyle": {
            "color": "#ffffff",
            "width": 4,
            "type": "dashed"
          },
          "label": {
            "normal": {
              "formatter": "内部整理",
              "show": true
            }
          },
          "name": "内部整理"
        }]
      }
    }
  },
  watch:{

  },
  mounted() {
    this.initChart()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'royal')
      this.chart.setOption(this.opinion)
    }
  }
}
</script>
